<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 面向过程编程和面向对象编程

    // 面向过程编程: 分析解决问题需要的步骤, 然后通过变量和方法一一实现, 使用时只需要按顺序调用即可


    // 面向对象编程:  思想上提升 , 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)
    // 大量的分工 和 紧密的协作    =>  往小了说(插件/模块)  往大了说(框架)

    // 面向对象三大特征:  封装 继承 多态


    // 举例说明:
    // 把大象放进冰箱中需要几步?

    // 面向过程: 分析解决问题需要的步骤, 然后通过变量和方法一一实现, 使用时只需要按顺序调用即可
    // (1)  有大象 和 冰箱  elephant  icebox
    // (2)  打开冰箱  open(){}
    // (3)  把大象放到冰箱中  put(){  }
    // (4)  关上冰箱   close(){}

    // 面向对象编程:  思想上提升 , 就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与行为(方法)--这个对象就称之为类(面向对象)
    冰箱 = {
        open() { },
        put(target) { },
        close() { }
    }

    // 最简单的面向对象 => 字面量对象  => 将面向过程中的变量和函数整合到对象中,作为对象的属性和方法  


    // 简易案例
    // 需求 描述一只猫的名称，颜色，叫声，技能

    // 面向过程
    // var name = "Tom";
    // var color = "Colorful の black";
    // var species = "猫科";
    // function call() {
    //     console.log("喵喵!");
    // }
    // function skill() {
    //     console.log("捉老鼠!");
    // }

    // 面向对象

    // 1.  字面量对象  => 最简单的面向对象 => 将面向过程中的变量和函数整合到对象中,作为对象的属性和方法

    // 缺点: 重复创建麻烦,代码没有复用

    var Tom = {
        name: "Tom",
        color: "Colorful の black",
        species: "猫科",
        call: function () {
            console.log("喵喵!");
        },
        skill() {
            console.log("捉老鼠!");
        }
    }

    var Kitty = {
        name: "Kitty",
        color: "pink",
        species: "猫科",
        call: function () {
            console.log("喵喵!");
        },
        skill() {
            console.log("捉老鼠!");
        }
    }

    var hong = {
        name: "Hong Mao",
        color: "red",
        species: "猫科",
        call: function () {
            console.log("喵喵!");
        },
        skill() {
            console.log("捉老鼠!");
        }
    }


    // 2. 函数封装  
    // 优点: 可根据既定的参数 快速创建对象 

    // 缺点:
    // 1. 通过该函数创建的对象,和函数没有关系(对比:实例化对象和构造函数的关系)
    // var arr = new Array(1, 2, 3);
    // console.log(arr instanceof Array);

    // var obj = {};
    // console.log(obj instanceof Object);

    // 2. 公有的属性和方法重复创建 => 占内存 

    function cat(name, color) {
        var obj = {
            name: name,
            color: color,
            species: "猫科",
            call: function () {
                console.log("喵喵!");
            },
            skill() {
                console.log("捉老鼠!");
            }
        }
        return obj;
    }

    var Tom = cat("Tom", "colorful の black");
    console.log(Tom);

    var Kitty = cat("Kitty", "pink");
    console.log(Kitty);


    // 面向对象的封装(自定义构造函数)







</script>

</html>